$wid:100%;
$bg:#eee;
$fl:left;
$yuan:none;
@mixin style{
    width: 220px;
    border: 1px solid #eee;
    border-top: 1px solid #086BAE;
    margin-bottom: 18px;
}
@mixin h4{
    height: 25px;
    border-bottom: 1px solid #eee;
    padding-left: 10px;
}
*{
    margin:0;
    padding: 0;
    text-decoration: none;
}
header{
    width:$wid;
    height:30px;
    background:$bg;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    div{
        width: 70%;
        margin: auto;
        font-size: 12px;
        p{
            font-size: 12px;
            line-height:30px;
            display: inline-block;
            float:$fl;
            span{
                margin-right: 10px;
            }
        }
       .sp{
            line-height: 30px;
            margin-left: 90px;
            position: relative;
            float: $fl;
            img{
                position: absolute;
                top: 4px;
                margin-left: 10px;
            }
        }
        ul{
            width: 320px;
            float: $fl;
            height: 30px;
            margin-top: 5px;
            margin-left: 40px;
            list-style: $yuan;
            li{
                width: 60px;
                height: 20px;
                border-right: 1px solid #000;
                text-align: center;
                line-height: 20px;
                float: $fl;
                box-sizing: border-box;
            }
        }
       h6{
            font-size: 12px;
            font-weight: normal;
            a{
              margin-left: -13px;
            }
            img{
              margin-left: 5px;
            }
        }
    }
}
.banner{
    width: $wid;
    height: 100px;
    .div{
        width: 70%;
        margin:0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            margin-top:10px;
        }
        p{
            width:470px;
            margin:0 auto;
            font-size: 12px;
        input{
            width: 300px;
            height: 30px;
            border:1px solid orange;
        }
        button{
           width: 80px;
           height: 33px;
           border: 2px solid #ccc;
           background: orange;
           margin-right: 10px; 
        }
        }
        div{
            width: 150px;
            height: 40px;
            background: $bg;
            text-align: center;
            line-height: 40px;
            margin-right: 50px;
            img{
                float: right;
            }
        }
    }
}
nav{
    width: $wid;
    height: 40px;
    background: #2372BD;
    ul{
        width: 80%;
        margin: 0 auto;
        color: white;
        height: 40px;
        list-style: $yuan;
        
        div{
            width: 180px;
            height: 40px;
            font-size: 20px;
            background: orange;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            float: $fl;
            img{
                float: right;
                margin-right: 10px;
                margin-top:13px ;
            }
        }
        li{
            width: 75px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-right: 1px solid white;
            float: $fl;
            font-size: 13px;
            margin-top: 10px;
        }
    }
}
.main{
    width: $wid;
    
    .main-1{
        width: 70%;
        margin:30px auto;
        p{
        width: $wid;
        height: 30px;
        font-size: 12px;
        text-align: center;
        .l{
            float: $fl;
        }
        .r{
            float: right;
        }
        }
        .booksfl{
                @include style;
                height: 204px;
                float: $fl;
                
            h4{
                @include h4;
            }
            ul{
                width: 90%;
                margin:0 auto;
                list-style: $yuan;
                li{
                    height: 30px;
                    font-size: 12px;
                    line-height: 30px;
                span{
                    color: #1111FF;
                    font-weight: bold;
                    
                }
                }
            }
           
        }
        .seet-1{
            width: 77%;
            height: 60px;
            background: #F3F3F3;
            border: 1px solid #ddd ;
            float: right;
          
            div{
                width: 90%;
                margin: auto;
                margin-top: 10px;
                font-size: 14px;
            }
        }
        .seet-2{
            width: 77%;
            height: 120px;
            border: 1px solid #ccc;
            background: #F3F3F3;
            border-top: 2px solid orange;
            float: right;
            margin-top:10px;
            .div1{
                width: 90%;
                height: 60px;
                ul{
                    list-style: $yuan;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    margin-top: 10px;
                    li{
                        width: 70px;
                        height: 25px;
                        border: 1px solid #ccc;
                        text-align: center;
                        line-height: 25px;
                        margin-left: 10px;
                        position: relative;
                        img{
                            position: absolute;
                            right: 0px;
                            top: 5px;
                        }
                    }

                }
            }

        }
        .seet-3{
            width: 100%;
            height: 30px;
            border-top: 1px solid #ccc;
            h5{
                width: 80%;
                font-weight: normal;
                line-height: 30px;
            }
        }
        .seet{
            @include style;
            height: 200px;
            margin-top: 89px;
            float: left;
            h4{
                @include h4;
            }
            ul{
                width: 75%;
                margin:0 auto;
                li{
                    font-size: 12px;
                    line-height: 25px;
                    &:hover{
                        color: orange;
                    }
                }
               
            }
            button{
                float: right;
                margin-right: 40px;
            }
        }
    }
}
#right3{
             width:77%;
             float: right;
             dl{
                 width:100%;
                 height:153px;
                 font-size:13px;
                 margin-top:20px;
                 border-bottom:1px solid #ccc;
                dt{float:left;}
                dt img{
                    width:90px;
                    height:128px;
                }
                dd{
                    width:85%;
                    float:left;
                    text-indent:10px;
                    line-height:30px;
                    span{
                        color:red;
                    }
                    s{
                        margin-left:150px;
                        font-size:12px;
                        color:#ccc;
                    }
                    p{
                        width: 26%;
                        display: inline-block;
                        float: right;
                    }
                }
             }
             
    }
    #nav2{
        background: red;
    }
